<template>
   <div class="serch">
        <div class="serch_l">
            <p>西安</p>
            <img src="../assets/jiantou.png">
        </div>
        <div class="serch_m">
            <div class="box">
                <img src="../assets/sousuo.png">请输入商家名、品类或者商圈
            </div>
        </div>
        <div class="serch_r">
            <img src="../assets/yuanquan.png" alt="">
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.serch {
    width: 375px;
    height: 50px;
    background: #ffcd00;
    display: flex;
}

.serch .serch_l {
    width: 50px;
    height: 50px;
    display: flex;
    margin-top: 15px;
    margin-left: 10px;
}

.serch .serch_l img {
    width: 8px;
    height: 5px;
    margin-top: 8px;
    margin-left: 4px;
}

.serch .serch_m {
    width: calc(100% - 100px);
    height: 50px;

}

.box {
    width: 200px;
    height: 30px;
    font-size: 13px;
    color: #999;
    background: #fff;
    border-radius: 8px;
    line-height: 30px;
    margin: auto;
    margin-top: 10px;
}

.serch .serch_m img {
    width: 13px;
    height: 14px;
}

.serch .serch_r {
    width: 50px;
    height: 50px;
}

.serch .serch_r img {
    width: 24px;
    height: 24px;
    margin-top: 13px;
}
</style>